<template>
  <div class="pinyinlist-line">
    <!-- <group title="A" id="A">
      <cell title="111">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/logo.jpg">
      </cell>
    </group>
    <group title="B" id="B">
      <cell title="111">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/logo.jpg">
      </cell>
    </group>
    <group title="C" id="C">
    </group>
    <group title="D" id="D">
    </group>
    <group title="E" id="E">
    </group>
    <group title="F" id="F">
    </group>
    <group title="G" id="G">
    </group>
    <group title="H" id="H">
    </group>
    <group title="I" id="I">
    </group>
    <group title="J" id="J">
    </group>
    <group title="k" id="k">
      <cell title="111">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/logo.jpg">
      </cell>
    </group>
    <group title="L" id="L">
    </group>
    <group title="M" id="M">
    </group>
    <group title="N" id="N">
    </group>
    <group title="O" id="O">
    </group>
    <group title="P" id="P">
    </group>
    <group title="Q" id="Q">
    </group>
    <group title="R" id="R">
    </group>
    <group title="S" id="S">
    </group>
    <group title="T" id="T">
    </group>
    <group title="U" id="U">
      <cell title="111">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/logo.jpg">
      </cell>
    </group>
    <group title="V" id="V">
    </group>
    <group title="W" id="W">
    </group>
    <group title="X" id="X">
      <cell title="111">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="~assets/x3/logo.jpg">
      </cell>
    </group>
    <group title="Y" id="Y">
    </group>
    <group title="Z" id="Z" name="Z">
    </group> -->
    <group v-for="(item,index)  in channel.pinYinInit" :key="index" v-show="channel.curShowPinYin[item].length!=0" :title="item" :id="item" :name="item">
      <!-- <cell v-for="(data,index) in channel.curShowPinYin[item]" :title="data.userName" :key="index">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" :src="data.headUrl">
      </cell> -->
      <div class="template-border-top" v-for="(data,index) in curShowPinYin[item]" :title="data.userName" :key="index">
        <cell :title="data.userName" is-link :border-intent="false" :arrow-direction="curShowPinYin[item][index].showDetail ? 'up' : 'down'" @click.native="curShowPinYin[item][index].showDetail = !curShowPinYin[item][index].showDetail">
          <img slot="icon" width="20" style="display:block;margin-right:5px;" :src="data.headUrl">
        </cell>
        <template v-if="curShowPinYin[item][index].showDetail">
          <div class="template-detail">
            <div>
              <div class="template-detail-left">
                <span class="template-detail-font">保单</span> : {{data.orderCount}}</div>
              <div>
                <span class="template-detail-font">保费</span> : {{data.orderAmout}}</div>
            </div>
            <div>
              <span>
                <span class="template-detail-font">注册时间</span> : {{data.resDate}}</span>
            </div>
          </div>
        </template>
      </div>
    </group>

    <div class="pinyinlist__navigation--right">
      <ul>
        <li>
          <a href="#"><img src="~assets/x3/ico/frist.png"></a>
        </li>
      </ul>
    </div>
    <div id="pinyinlist__navigation--letter"></div>
  </div>
</template>

<script>
import PinYin from 'src/common/util/pinyin';
import { Cell, Group, CellBox, CellFormPreview, Badge } from 'vux';
import { mapState, mapActions } from "vuex";
export default {
  components: {
    Group,
    Cell,
    CellBox,
    CellFormPreview,
    Badge
  },
  computed: mapState({
    isWeChar: "isWeChar",
    user: "user",
    channel: "channel"
  }),
  data() {
    return {
      curShowPinYin: {
        'A': [],
        'B': [], 'C': [], 'D': [], 'F': [], 'G': [], 'H': [], 'I': [], 'J': [], 'K': [], 'L': [], 'M': [], 'N': [], 'O': [], 'P': [], 'Q': [], 'R': [], 'S': [], 'T': [], 'U': [], 'V': [], 'W': [], 'X': [], 'Y': [], 'Z': []
      },
    }
  },
  watch: {
    'channel.curShowPinYin': {
      handler(cur, old) {
        this.curShowPinYin = this.channel.curShowPinYin;
        // this.useNatureList = CarConfig.getCarKind(this.car.carInfoList[this.car.licenseNo].tprptCarOwnerDto.natureOfRole, this.tprpTitemCarDto.carKindCode);
        // if (!cur) {
        //     this.setQueryInfo();
        // }
      }
    },
  },
  methods: {
    init() {
      let navigation = $('.pinyinlist__navigation--right');
      navigation.find('ul').append(PinYin.getPinYinList());
      $(".pinyinlist__navigation--right ul li").click(function () {
        let LetterBox = $('#pinyinlist__navigation--letter');
        let _this = $(this);
        LetterBox.html(_this.html()).fadeIn();
        navigation.css('background', 'rgba(145,145,145,0.6)');

        setTimeout(function () {
          navigation.css('background', 'rgba(145,145,145,0)');
          LetterBox.fadeOut();
        }, 1000);
      })
    }
  },
  mounted() {
    this.init();
    let name = "邱琼龙龙龙";
    let frist = PinYin.getFristChar(name.charAt(0))[0].toUpperCase();
    console.log(frist);
  }
}
</script>

<style lang="scss" >
.pinyinlist__navigation--right {
  position: fixed;
  top: 47px;
  right: 0px; // height: 100%;
  // width: 15px;
  padding-right: 10px;
  text-align: center;
  font-size: 12px;
  z-index: 99;
  background: rgba(145, 145, 145, 0);
}

.pinyinlist__navigation--right li img {
  width: 14px;
}
.pinyinlist-line {
  ul li {
    list-style: none;
    a {
      color: #000;
    }
  }
}

#pinyinlist__navigation--letter {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  font-size: 75px;
  color: #555;
  text-align: center;
  line-height: 100px;
  background: rgba(145, 145, 145, 0.6);
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -50px 0px 0px -50px;
  z-index: 99;
  display: none;
}

#pinyinlist__navigation--letter img {
  width: 50px;
  height: 50px;
  float: left;
  margin: 25px 0px 0px 25px;
}

.pinyinlist-line {
  a:link {
    text-decoration: none;
  }

  a:visited {
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
}
</style>
